import React from 'react';
import { Route} from 'react-router-dom'
import { App, ZMPRouter, AnimationRoutes, SnackbarProvider } from 'zmp-ui'; 
import { RecoilRoot } from 'recoil';
import { I18nProvider } from '../i18n';
import HomePage from '../pages';
import About from '../pages/about';
import Form from '../pages/form';
import User from '../pages/user';
import Login from '../pages/login';
import Orders from '../pages/orders';
import Wallet from '../pages/wallet';
import Splash from '../pages/splash';
import CountryCode from '../pages/country-code';
import PhoneCode from '../pages/account/phone-code';
import Profile from '../pages/profile';
import Help from '../pages/help';
import HelpDetail from '../pages/help-detail';
import Feedback from '../pages/feedback';
import Settings from '../pages/settings';
import OrderDetail from '../pages/order-detail';
import Merchants from '../pages/merchants';
import MerchantDetail from '../pages/merchant-detail';
import Scan from '../pages/scan';
import ScanResult from '../pages/scan-result';
import CreateOrder from '../pages/create-order';
import PaymentSuccess from '../pages/payment-success';
import PaymentCallback from '../pages/payment-callback';
import ZaloSDKTest from '../pages/zalo-sdk-test';


const MyApp = () => {
  return (
    <RecoilRoot>
      <I18nProvider>
      <App >
      <SnackbarProvider>
        <ZMPRouter>
          <AnimationRoutes>
            <Route path="/" element={<Splash></Splash>}></Route>
            <Route path="/home" element={<HomePage></HomePage>}></Route>
            <Route path="/splash" element={<Splash></Splash>}></Route>
            <Route path="/about" element={<About></About>}></Route>
          <Route path="/form" element={<Form></Form>}></Route>
          <Route path="/user" element={<User></User>}></Route>
          <Route path="/login" element={<Login></Login>}></Route>
          <Route path="/country-code" element={<CountryCode></CountryCode>}></Route>
          <Route path="/orders" element={<Orders></Orders>}></Route>
          <Route path="/wallet" element={<Wallet></Wallet>}></Route>
          <Route path="/account/phone-code" element={<PhoneCode></PhoneCode>}></Route>
          <Route path="/profile" element={<Profile></Profile>}></Route>
          <Route path="/help" element={<Help></Help>}></Route>
          <Route path="/help-detail" element={<HelpDetail></HelpDetail>}></Route>
          <Route path="/feedback" element={<Feedback></Feedback>}></Route>
          <Route path="/settings" element={<Settings></Settings>}></Route>
          <Route path="/order-detail/:id" element={<OrderDetail></OrderDetail>}></Route>
          <Route path="/merchants" element={<Merchants></Merchants>}></Route>
          <Route path="/merchant-detail" element={<MerchantDetail></MerchantDetail>}></Route>
          <Route path="/scan" element={<Scan></Scan>}></Route>
          <Route path="/scan-result" element={<ScanResult></ScanResult>}></Route>
          <Route path="/create-order" element={<CreateOrder></CreateOrder>}></Route>
          <Route path="/payment-success" element={<PaymentSuccess></PaymentSuccess>}></Route>
          <Route path="/payment-callback" element={<PaymentCallback></PaymentCallback>}></Route>
          <Route path="/order-detail/success" element={<PaymentSuccess></PaymentSuccess>}></Route>
          <Route path="/zalo-sdk-test" element={<ZaloSDKTest></ZaloSDKTest>}></Route>
          </AnimationRoutes>
        </ZMPRouter>
      </SnackbarProvider>
      </App>
      </I18nProvider>
    </RecoilRoot>
  );
}
export default MyApp;